<template>
  <!-- 贴子详情页面(新版) -->
  <view class="main">
    <!-- 顶部显示 -->
    <view class="roof">
      <view class="left" @click="handleTui">
        <image src="../../imges/shangYe.png" mode="aspectFill"></image>
        <text>帖子详情</text>
      </view>
      <view class="right" @click="handleLookZhe">...</view>
    </view>
    <!-- 帖子内容 -->
    <view class="content">
      <!-- 列表显示(关注 探索) -->
      <view class="itemList">
        <!-- 顶部信息 -->
        <view class="top">
          <view class="left">
            <view class="one" @tap="toCard(tieziData.createUid)"
              ><image :src="tieziData.avatarUrl" mode="aspectFill"></image
            ></view>
            <!-- 进帖子详情 -->
            <view class="two">
              <view class="top1">
                <text class="name">{{ tieziData.userName }}</text>
                <text class="company">{{ tieziData.company }}</text>
              </view>
              <view class="bottom1">{{ tieziData.showDate }}</view>
            </view>
          </view>
          <view class="right">
            <image
              v-if="tieziData.isTop == 1"
              src="../../imges/zhiding.png"
              mode="aspectFill"
              class="zhiding"
            ></image>
            <image
              v-if="tieziData.isEssences == 1"
              src="../../imges/jing.png"
              mode="aspectFill"
              class="jinghua"
            ></image>
          </view>
        </view>
        <!-- 中间内容 及图片 -->
        <!-- 进贴子详情 -->
        <view class="text_" v-html="content"></view>
        <!-- 图片显示 -->
        <view class="imgs" v-if="zongLength > 0">
          <video
            v-if="videos.length > 0"
            class="myVideo"
            style="margin-top: 20rpx"
            :src="videos[0].fileUrl"
            enable-danmu
            controls
            :poster="videos[0].firstUrl"
            :duration="videos[0].videoTime"
          ></video>
          <!-- 多张照片 -->
          <view class="moreimg">
            <image
              v-if="imgLength > 1"
              v-for="(item, index) in imgs"
              :key="index"
              :src="item.fileUrl"
              mode="aspectFill"
              @tap="imgsDa(tieziData.imgCollection, index)"
            ></image>
          </view>

          <!-- 一张或者一个视频 -->
          <image
            v-if="imgLength == 1"
            class="myVideo"
            :src="imgs[0].fileUrl"
            mode="aspectFill"
            @tap="imgsDa(imgs, 0)"
          ></image>
        </view>

        <!-- 活动显示 -->
        <view class="active" v-if="activity">
          <view class="card">
            <image
              class="datu"
              :src="tieziData.act.actPoster"
              mode="aspectFill"
            ></image>
            <view class="mengceng"></view>
            <view class="text">
              <view class="title">
                {{ tieziData.act.topic }}
              </view>
              <view class="message">
                <image src="../../imges/time.png" mode="aspectFill"></image>
                <text class="time">{{ tieziData.act.actStartTime }}</text>
                <image src="../../imges/adress.png" mode="aspectFill"></image>
                <text>{{ tieziData.act.actAddress }}</text>
              </view>
            </view>
            <view
              class="join"
              @tap="handleBtn('active')"
              v-if="openApp.phone == 'ios'"
            >
              参加活动
            </view>
            <view
              class="join"
              v-if="openApp.iswx == 'wx' && openApp.phone == 'Android'"
            >
              <wx-open-launch-app
                id="launch-btn"
                appid="wx8737e94836340f56"
                @error="openApp.handleErrorFn"
                @launch="openApp.handleLaunchFn"
                :extinfo="activeExtinfoid"
              >
                <script type="text/wxtag-template">
                          <style>
                            .join1 {
                  display: block;
                  height: 25px;
                  line-height: 25px;
                              font-family: PingFang-SC-Medium;
                              font-size: 13px;
                              color: #ffffff;
                            }
                          </style>
                         <view class="join1" > 参加活动 </view>
                </script>
              </wx-open-launch-app>
            </view>
          </view>
        </view>

        <!-- 商品显示 -->
        <view
          class="goods"
          v-if="
            (goods && openApp.phone == 'ios') ||
            (goods && tieziData.isSelf == 0)
          "
          @tap="goumai"
        >
          <view class="card">
            <image
              class="datu"
              :src="tieziData.goodsInfo.goodsImg"
              mode="aspectFill"
            ></image>
            <view class="mengceng"></view>
            <view class="text">
              <view class="title">
                {{ tieziData.goodsInfo.goodsName }}
              </view>
              <view class="message">
                {{ tieziData.goodsInfo.goodsBrief }}
              </view>
              <view class="price">
                <view class="jiage">
                  <s v-if="tieziData.goodsInfo.price">{{
                    tieziData.goodsInfo.price
                      ? "￥" + tieziData.goodsInfo.price
                      : ""
                  }}</s>
                  <text>￥{{ tieziData.goodsInfo.presentPrice }}</text>
                </view>
                <view class="buy">
                  {{
                    tieziData.isSelf == 1 ? "查看商品订单" : "立即购买"
                  }}</view
                >
              </view>
            </view>
          </view>
        </view>
        <!-- 商品显示 -->
        <view
          class="goods"
          v-if="
            goods &&
            openApp.iswx == 'wx' &&
            openApp.phone == 'Android' &&
            tieziData.isSelf == 1
          "
        >
          <view class="card">
            <image
              class="datu"
              :src="tieziData.goodsInfo.goodsImg"
              mode="aspectFill"
            ></image>
            <view class="mengceng"></view>
            <view class="text">
              <view class="title">
                {{ tieziData.goodsInfo.goodsName }}
              </view>
              <view class="message">
                {{ tieziData.goodsInfo.goodsBrief }}
              </view>
              <view class="price">
                <view class="jiage">
                  <s v-if="tieziData.goodsInfo.price">{{
                    tieziData.goodsInfo.price
                      ? "￥" + tieziData.goodsInfo.price
                      : ""
                  }}</s>
                  <text>￥{{ tieziData.goodsInfo.presentPrice }}</text>
                </view>
                <view class="buy">
                  <wx-open-launch-app
                    id="launch-btn"
                    appid="wx8737e94836340f56"
                    @error="openApp.handleErrorFn"
                    @launch="openApp.handleLaunchFn"
                    :extinfo="extinfoid"
                  >
                    <script type="text/wxtag-template">
                                <style>
                                        .buy1 {
                      display: block;
                      height: 25px;
                      line-height: 25px;
                      font-size: 12px;
                      color: #ffffff;
                                        }
                                </style>
                                <view class="buy1">查看商品订单</view>
                    </script>
                  </wx-open-launch-app>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="lhzheZhao" @tap="queRen" v-if="is_Block">
          <view class="modal">
            <view class="header">提示</view>
            <view class="text">你已被该圈子拉黑，暂无法查看任何内容!</view>
            <view class="btn_">
              <view class="left" @tap.stop="queRen">确认</view>
            </view>
          </view>
        </view>

        <!-- 打赏及打赏列表入口 -->
        <navigator
          :url="
            '/pages/index/appreciateAuthor?id=' +
            id +
            '&name=' +
            tieziData.userName +
            '&url=' +
            tieziData.avatarUrl +
            '&company=' +
            tieziData.company
          "
          hover-class="none"
          v-if="tieziData.isReward == 1"
        >
          <view class="reward">赞赏</view>
        </navigator>

        <navigator
          :url="
            '/pages/index/appreciateList?id=' +
            tieziData.id +
            '&num=' +
            tieziData.rewardCount +
            '&name=' +
            tieziData.userName +
            '&url=' +
            tieziData.avatarUrl +
            '&company=' +
            tieziData.company
          "
          hover-class="none"
          class="rewardList"
          v-if="tieziData.isReward == 1"
        >
          <text>已有{{ tieziData.rewardCount }}人赞赏</text>
          <image src="../../imges/you.png" mode="aspectFill"></image>
        </navigator>

        <!-- 赞显示 -->
        <view class="zanXian">
          <navigator
            :url="'/pages/index/zanRen?id=' + tieziData.id"
            hover-class="none"
            class="left"
            v-if="dianzanPhoto.length > 0"
          >
            <image
              :src="item"
              mode="aspectFill"
              v-for="(item, index) in dianzanPhoto"
              :key="index"
            ></image>
          </navigator>
          <view
            v-if="dianzanPhoto.length < 1"
            style="font-size: 24rpx; color: #888888"
            >快来未喜欢的帖子点赞吧~</view
          >
          <view class="right">
            <image
              v-if="tieziData.isThumbs == 1"
              @tap="handleLike(tieziData.id, 1, 0)"
              src="../../imges/zan.png"
              mode="aspectFill"
            ></image>
            <image
              v-else
              @tap="handleLike(tieziData.id, 0, 0)"
              src="../../imges/zan1.png"
              mode="aspectFill"
            ></image>
            <text :class="[tieziData.isThumbs == 1 ? 'active' : '']">{{
              tieziData.thumbsCount
            }}</text>
          </view>
        </view>

        <!-- 加入或进入圈子 -->
        <view class="xian_cu"></view>
        <view class="quan_jia">
          <view class="left">
            <image :src="tieziData.orgUrl" mode="aspectFill"></image>

            <view class="center">
              <view class="one">{{ tieziData.orgName }}</view>
              <view class="two">成员&nbsp;{{ tieziData.userCount }}</view>
              <view class="two">帖子&nbsp;{{ tieziData.postCount }}</view>
            </view>
          </view>

          <view @tap="goQz()" v-if="tieziData.isJoin == 0"
            ><view class="right">加入圈子</view></view
          >
          <view @tap="goQz()" v-if="tieziData.isJoin == 1"
            ><view class="right1">进入圈子</view></view
          >
        </view>
        <view class="xian_cu"></view>

        <!-- 全部评论 -->
        <view class="all_commt">
          <view class="title">{{
            plList.length > 0 ? "全部评论" : "暂无评论"
          }}</view>
          <view class="item" v-for="(item1, index) in plList" :key="index">
            <view class="left" @tap="toCard(item1.createUid)"
              ><image :src="item1.avatarUrl" mode="aspectFill"></image
            ></view>
            <view class="right">
              <view class="one">{{ item1.realName }}</view>
              <view @tap="todetail(index)">
                <view class="two">{{ item1.content }}</view>
                <view class="imgs">
                  <image
                    :src="img"
                    v-for="(img, index) in item1.picturesUrl"
                    @tap.stop="pinlunImgDa(item1.picturesUrl, index)"
                    mode="aspectFill"
                    :key="index"
                  ></image>
                </view>

                <view class="time">
                  <view class="hour">
                    {{ item1.createTime }}
                    <text>.</text>
                  </view>
                  <view class="huifu">回复</view>
                </view>
                <!-- 评论列表 -->
                <view class="commit_list" v-if="item1.list.length > 0">
                  <view
                    class="item"
                    v-for="(item2, index) in myfilter(item1)"
                    :key="index"
                  >
                    <text>{{ item2.realName }}</text>
                    <text>回复 {{ item2.parentName }}</text>
                    ：
                    <text class="content">{{ item2.content }}</text>
                  </view>
                  <view class="footer" v-if="item1.list.length > 2">
                    查看全部{{ item1.list.length }}条评论及回复
                    <text>></text>
                  </view>
                </view>
              </view>
            </view>
            <view
              class="shanchu"
              v-if="item1.isCreated == 1 || tieziData.isSelf == 1"
              @tap="pinlunShanchu(item1.messageId, item1.id)"
            >
              <image src="../../imges/shanchu6.png" mode="aspectFill"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 帖子操作圈子模块 -->
    <view class="zhe" v-if="zhe_zhao" @click="handleCloseZhe">
      <view class="child">
        <view class="jiao"></view>
        <view class="one" @tap="lookFX_mask">分享</view>
        <navigator
          :url="'/pages/my_circle/report?type=13&id=' + tieziData.id"
          v-if="tieziData.isAdmin == 0 || tieziData.isSelf == 0"
          class="one"
          hover-class="none"
        >
          举报
        </navigator>

        <navigator
          :url="'/pages/newPost/newEditor?id=' + tieziData.id"
          v-if="tieziData.isSelf == 1"
          class="one"
          hover-class="none"
          >编辑</navigator
        >

        <view
          class="one"
          v-if="tieziData.isAdmin == 1 || tieziData.isSelf == 1"
          @tap="handleDelete"
          >删除</view
        >
      </view>
    </view>

    <!-- 底部固定 -->
    <view class="fixation">
      <view @tap="xiepinlun" class="one">
        <image src="../../imges/fatie.png" mode="aspectFill"></image>
        <text>写评论</text>
      </view>
      <view class="two">
        <image
          v-show="tieziData.isThumbs == 1"
          @tap="handleLike(tieziData.id, 1, 0)"
          src="../../imges/zan.png"
          mode="aspectFill"
        ></image>
        <image
          v-show="tieziData.isThumbs == 0"
          @tap="handleLike(tieziData.id, 0, 0)"
          src="../../imges/zan1.png"
          mode="aspectFill"
        ></image>
        <text>{{ tieziData.thumbsCount }}</text>
      </view>
      <view class="three" @tap="lookFX_mask">
        <image src="../../imges/fen66.png" mode="aspectFill"></image>
        <text>分享</text>
      </view>
    </view>

    <view class="mask_" v-if="FX_mask" @tap="closeFX_mask">
      <image src="../../imges/tieziFS.png" mode="aspectFill"></image>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
import "../../utils/toApp.js";
var jweixin = require("jweixin-module"); //配置
import uniLink from "@/components/uni-link/uni-link.vue";
export default {
  data() {
    return {
      dangqianId: "",
      is_Block: false,
      is_mask: false,
      zhe_zhao: false, //帖子操作
      FX_mask: false,
      activity: false,
      goods: false,
      imgs: [], //照片数组
      videos: [], //视频数组
      id: "",
      prompt: "",
      tieziData: {},
      dianzanPhoto: [],
      imgLength: "",
      zongLength: "",
      isShare: "", //是否分享
      plList: [],
      encryptUserId: "", //用户标识（自己）
      extinfoid: "",
      activeExtinfoid: "",
      content: "",
    };
  },
  computed: {
    myfilter() {
      return function (item) {
        return item.list.slice(0, 2);
      };
    },
    setContent() {
      return function (data) {
        this.content = data.replace(/\n/g, "<br/>");
        console.log(this.content);
        return data.replace(/\n/g, "<br/>");
      };
    },
  },
  onShow() {
    let token = uni.getStorageSync("token");
    if (token && this.isShare != 1) {
      this.tieziDetail(this.id);
      this.pinlunList();
      this.handleShare();
    }
    this.configWeiXin1();
  },
  onLoad(options) {
    let token = uni.getStorageSync("token");
    this.id = options.id;
    if (options.isShare == 1) {
      this.isShare = options.isShare;
    }
    if (options.isShare == 1 && !token) {
      // this.isShare = options.isShare;
      this.shareData();
    } else {
      this.tieziDetail(this.id);
      this.pinlunList();
      this.handleShare();
      this.ifshanchu();
    }
    if (options.type == 1) {
      uni.showModal({
        title: "你已成功支付订单",
        content: "请耐心等待商家发货",
        confirmText: "查看订单",
        cancelText: "我已知晓",
        success: (re) => {
          if (re.confirm) {
            uni.navigateTo({
              url: "/pages/webGoods/myOrder",
            });
          }
        },
      });
    }
  },
  onPullDownRefresh() {
    setTimeout(() => {
      uni.stopPullDownRefresh();
      uni.showToast({
        title: "刷新成功",
        duration: 2000,
        icon: "none",
      });
    }, 2000);
  },
  methods: {
    configWeiXin1() {
      //获取公众号配置
      request({
        //获取appid
        url: "wechat/portal/jsapiSignature/",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": "1.3.3",
          "Source-Type": 7,
        },
        data: {
          url: window.location.href.split("#")[0], //后台通过域名进行授权
        },
      }).then((res) => {
        if (res.statusCode == 200) {
          //获取成功
          jweixin.config({
            debug: false, // 开启调试模式，发布的时候改为false
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名
            jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"], // 必填，需要使用的JS接口列表
            openTagList: ["wx-open-launch-app"],
          });
          jweixin.ready(function () {});
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });

      if (this.openApp.iswx == "wx" && this.openApp.phone == "Android") {
        this.extinfoid = `yqlw://yilaiwang.com/openDetail?jumpType=18&serviceId=''&type=1&orgId=''&content=''`;
        this.activeExtinfoid = `yqlw://yilaiwang.com/openDetail?jumpType=0&serviceId=${this.tieziData.activityId}&type=''&orgId=''&content=''`;
      }
    },
    //jdk配置
    configWeiXin() {
      let _this = this;
      //获取公众号配置
      request({
        //获取appid
        url: "wechat/portal/jsapiSignature/",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": "1.3.3",
          "Source-Type": 7,
        },
        data: {
          url: window.location.href.split("#")[0], //后台通过域名进行授权
        },
      }).then((res) => {
        var jsApiList = [
          "onMenuShareAppMessage",
          "onMenuShareTimeline",
          "updateAppMessageShareData",
          "updateTimelineShareData",
          "hideOptionMenu",
          "showOptionMenu",
        ];
        if (res.statusCode == 200) {
          //获取成功
          jweixin.config({
            debug: false, // 开启调试模式，发布的时候改为false
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名
            jsApiList: jsApiList, // 必填，需要使用的JS接口列表
          });
          jweixin.ready(function () {
            //配置成功
            _this.wxJsdkAuthorize(res.data.appId); //调用公众号-授权
          });
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    //公众号授权
    wxJsdkAuthorize(_appid) {
      //授权时会跳到微信的页面，然后会自动调回来带着一个code
      let link = window.location.href;
      let _code = "";
      if (link.includes("code=")) {
        _code = link.split("code=")[1].split("&")[0];
      }
      // 如果拿到_code，传到后台
      if (_code) {
        console.log(_code, "打印code");
        request({
          url: "h5/loginapptoken/getOpenId", //拿oponid
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
          },
          data: {
            code: _code,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            if (res.data.data.isLogin == false) {
              uni.navigateTo({
                url:
                  "/pages/index/verifyPhone?openId=" +
                  res.data.data.openId +
                  "&accessToken=" +
                  res.data.data.accessToken,
              });
            } else {
              uni.showToast({
                title: "登录成功",
                duration: 1500,
                icon: "none",
              });
              uni.setStorageSync("token", res.data.data.token); //缓存token'
              uni.setStorageSync("personal", res.data.data);
              this.encryptUserId = uni.getStorageSync("personal").encryptUserId; //拿本地用户id
              this.tieziDetail(this.id);
              this.pinlunList();
            }
          } else {
            // uni.showToast({
            //   title: "微信授权失效，请关闭重试",
            //   duration: 2000,
            //   icon: "none",
            // });
          }
        });
      } else {
        let appid = _appid;
        let uri = encodeURIComponent(link);
        let authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
        window.location.href = authURL;
      }
    },
    toApp() {
      let token = uni.getStorageSync("token");
      if (this.isShare == 1 && !token) {
        uni.showToast({
          title: "正在授权登录，请稍等",
          duration: 1000,
          icon: "none",
        });
        this.configWeiXin(); //掉授权
      } else {
        this.openApp.toApps(18, "", 1, "", "");
      }
    },
    goQz() {
      let token = uni.getStorageSync("token");
      if (this.isShare == 1 && !token) {
        uni.showToast({
          title: "正在授权登录，请稍等",
          duration: 1000,
          icon: "none",
        });
        this.configWeiXin(); //掉授权
      } else {
        uni.navigateTo({
          url: "/pages/index/detail?id=" + this.tieziData.orgId,
        });
      }
    },
    queRen() {
      let token = uni.getStorageSync("token");
      if (this.isShare == 1 && !token) {
        uni.showToast({
          title: "正在授权登录，请稍等",
          duration: 1000,
          icon: "none",
        });
        this.configWeiXin(); //掉授权
      } else {
        uni.navigateBack({
          delta: 1,
        });
      }
    },
    toCard(id) {
      let token = uni.getStorageSync("token");
      if (this.isShare == 1 && !token) {
        uni.showToast({
          title: "正在授权登录，请稍等",
          duration: 1000,
          icon: "none",
        });
        this.configWeiXin(); //掉授权
      } else {
        uni.navigateTo({
          url: "/pages/index/personal?id=" + id,
        });
      }
    },
    todetail(item) {
      let token = uni.getStorageSync("token");
      if (this.isShare == 1 && !token) {
        uni.showToast({
          title: "正在授权登录，请稍等",
          duration: 1000,
          icon: "none",
        });
        this.configWeiXin(); //掉授权
      } else {
        uni.navigateTo({
          url:
            "/pages/index/replyComment?id=" +
            this.id +
            "&index=" +
            item +
            "&isSelf=" +
            this.tieziData.isSelf,
        });
      }
    },
    goumai() {
      let token = uni.getStorageSync("token");
      if (this.isShare == 1 && !token) {
        uni.showToast({
          title: "正在授权登录，请稍等",
          duration: 1000,
          icon: "none",
        });
        this.configWeiXin(); //掉授权
      } else {
        // window.location.href = this.tieziData.goodsInfo.storeLinks;
        // 是否创建人 0 否 1 是
        if (this.tieziData.isSelf == 1) {
          uni.showModal({
            title: "前往APP",
            content: "即将离开微信，打开“一起来往”查看我的商品列表",
            confirmText: "允许",
            success: (res) => {
              if (res.confirm) {
                uni.showLoading({
                  title: "加载中，请稍等~",
                });
                setTimeout(function () {
                  uni.hideLoading();
                }, 3000);
                var url = window.location.href.split("&code")[0];
                window.history.pushState({}, 0, url);
                this.openApp.toApps(18, "", 1, "", "");
              }
            },
          });
        } else {
          uni.navigateTo({
            url:
              "/pages/webGoods/payConfirmation?id=" +
              this.tieziData.goodsInfo.id +
              "&tieziId=" +
              this.id,
          });
        }
      }
    },
    ifshanchu() {
      let token = uni.getStorageSync("token");
      if (this.isShare == 1 && !token) {
        // uni.showToast({
        //   title: "正在授权登录，请稍等",
        //   duration: 1000,
        //   icon: "none",
        // });
        // this.configWeiXin(); //掉授权
      } else {
        let token = uni.getStorageSync("token");
        const that = this;
        if (!token) {
          uni.showToast({
            title: "请授权登录再操作！",
            duration: 2000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/index/index",
            });
          }, 2000);
        } else {
          request({
            url: "app/goods/getPostResult",
            method: "POST",
            header: {
              "content-type": "application/json;charset=UTF-8",
              "api-client": "72e0fee8172411ea995200163e05ff66",
              "api-version": "1.3.3",
              "Source-Type": 7,
              token: token,
            },
            data: {
              id: that.id,
            },
          }).then((res) => {
            if (res.data.code == 200) {
              if (res.data.data.flag == 1) {
                uni.showToast({
                  title: "该帖子已删除",
                  duration: 2000,
                  icon: "none",
                });
                setTimeout(() => {
                  uni.navigateBack({
                    delta: 1,
                  });
                }, 1500);
              }
            } else if (res.data.code == 401) {
            } else {
              uni.showToast({
                title: res.data.msg,
                duration: 2000,
                icon: "none",
              });
            }
          });
        }
      }
    },
    xiepinlun() {
      let token = uni.getStorageSync("token");
      if (this.isShare == 1 && !token) {
        uni.showToast({
          title: "正在授权登录，请稍等",
          duration: 1000,
          icon: "none",
        });
        this.configWeiXin(); //掉授权
      } else {
        uni.navigateTo({
          url: "/pages/index/writeComment?id=" + this.tieziData.id,
        });
      }
    },
    //无token
    shareData() {
      let that = this;
      request({
        url: "h5/org/h5PostInfo",
        method: "POST",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": "1.3.3",
          "Source-Type": 7,
        },
        data: {
          id: that.id,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          that.tieziData = res.data.data;
          that.content = res.data.data.content.replace(/ /g, "&nbsp");
          that.content = res.data.data.content.replace(/\n/g, "<br>");
          if (res.data.data.isBlock == 1) {
            that.is_Block = true;
          }
          this.handleShare(); //分享功能
          if (res.data.data.thumbsList.length > 10) {
            that.dianzanPhoto = res.data.data.thumbsList.slice(0, 10);
            console.log(that.dianzanPhoto);
          } else {
            that.dianzanPhoto = res.data.data.thumbsList;
          }
          that.imgs = res.data.data.imgCollection.filter((v) => {
            return v.fileType == 1;
          });
          that.videos = res.data.data.imgCollection.filter((v) => {
            return v.fileType == 3;
          });
          that.imgLength = that.imgs.length;
          that.zongLength = res.data.data.imgCollection.length;
          console.log(that.imgs, that.videos);
          if (res.data.data.act.id == "" || res.data.data.act.id == undefined) {
            that.activity = false;
          } else {
            that.activity = true;
          }
          if (
            res.data.data.goodsInfo.id == "" ||
            res.data.data.goodsInfo.id == undefined
          ) {
            that.goods = false;
          } else {
            that.goods = true;
          }
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    pinlunList() {
      let token = uni.getStorageSync("token");
      if (this.isShare == 1 && !token) {
        // uni.showToast({
        //   title: "正在授权登录，请稍等",
        //   duration: 1000,
        //   icon: "none",
        // });
        // this.configWeiXin(); //掉授权
      } else {
        let token = uni.getStorageSync("token");
        const that = this;
        // console.log(token, 'token')
        if (!token) {
          uni.showToast({
            title: "请授权登录再操作！",
            duration: 2000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/index/index",
            });
          }, 2000);
        } else {
          request({
            url:
              "app/orgMessage/infoComments?uid=069eae3f192b11e983f6fa163e4d6bc3",
            method: "POST",
            header: {
              "content-type": "application/json;charset=UTF-8",
              "api-client": "72e0fee8172411ea995200163e05ff66",
              "api-version": "1.3.3",
              "Source-Type": 7,
              token: token,
            },
            data: {
              messageId: this.id,
              pageNumber: 1,
              pageSize: 100,
            },
          }).then((res) => {
            if (res.data.code == 200) {
              this.plList = res.data.data.rows;
              console.log();
            } else if (res.data.code == 401) {
            } else {
              uni.showToast({
                title: res.data.msg,
                duration: 2000,
                icon: "none",
              });
            }
          });
        }
      }
    },
    //请求帖子详情数据
    tieziDetail(id) {
      let token = uni.getStorageSync("token");
      if (this.isShare == 1 && !token) {
        uni.showToast({
          title: "正在授权登录，请稍等",
          duration: 1000,
          icon: "none",
        });
        this.configWeiXin(); //掉授权
      } else {
        let token = uni.getStorageSync("token");
        const that = this;
        if (!token) {
          uni.showToast({
            title: "请授权登录再操作！",
            duration: 2000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/index/index",
            });
          }, 2000);
        } else {
          request({
            url: "app/orgMessage/postInfo",
            method: "POST",
            header: {
              "content-type": "application/json;charset=UTF-8",
              "api-client": "72e0fee8172411ea995200163e05ff66",
              "api-version": "1.3.3",
              "Source-Type": 7,
              token: token,
            },
            data: {
              id: id,
            },
          }).then((res) => {
            if (res.data.code == 200) {
              that.tieziData = res.data.data;
              that.content = res.data.data.content.replace(/ /g, "&nbsp");
              that.content = res.data.data.content.replace(/\n/g, "<br>");
              // that.content = res.data.data.content.replace(/\s/g,"&nbsp;");

              if (res.data.data.isBlock == 1) {
                that.is_Block = true;
              }
              this.handleShare(); //分享功能
              if (res.data.data.thumbsList.length > 10) {
                that.dianzanPhoto = res.data.data.thumbsList.slice(0, 10);
                console.log(that.dianzanPhoto);
              } else {
                that.dianzanPhoto = res.data.data.thumbsList;
              }
              // that.imgLength = res.data.data.imgCollection.length
              that.imgs = res.data.data.imgCollection.filter((v) => {
                return v.fileType == 1;
              });
              that.videos = res.data.data.imgCollection.filter((v) => {
                return v.fileType == 3;
              });
              that.imgLength = that.imgs.length;
              that.zongLength = res.data.data.imgCollection.length;
              console.log(that.imgs, that.videos);
              if (
                res.data.data.act.id == "" ||
                res.data.data.act.id == undefined
              ) {
                that.activity = false;
              } else {
                that.activity = true;
              }
              if (
                res.data.data.goodsInfo.id == "" ||
                res.data.data.goodsInfo.id == undefined
              ) {
                that.goods = false;
              } else {
                that.goods = true;
              }
            } else if (res.data.code == 401) {
              that.shareData();
              uni.removeStorageSync("token");
              that.configWeiXin(); //掉授权
            } else {
              uni.showToast({
                title: res.data.msg,
                duration: 2000,
                icon: "none",
              });
            }
          });
        }
      }
    },
    handleLookZhe() {
      this.zhe_zhao = true;
    },
    handleCloseZhe() {
      this.zhe_zhao = false;
    },
    handleTui() {
      if (this.isShare == 1) {
        uni.redirectTo({
          url: "/pages/index/index",
        });
      } else {
        uni.navigateBack({
          delta: 1,
        });
      }
    },
    closeFX_mask() {
      this.FX_mask = false;
    },
    lookFX_mask() {
      this.FX_mask = true;
    },
    handleBtn(type) {
      let token = uni.getStorageSync("token");
      if (this.isShare == 1 && !token) {
        uni.showToast({
          title: "正在授权登录，请稍等",
          duration: 1000,
          icon: "none",
        });
        this.configWeiXin(); //掉授权
      } else {
        //点击参加活动
        uni.showModal({
          title: "前往APP",
          content: "即将离开微信，打开“一起来往”查看活动详情",
          confirmText: "允许",
          success: (res) => {
            if (res.confirm) {
              uni.showLoading({
                title: "加载中，请稍等~",
              });
              setTimeout(function () {
                uni.hideLoading();
              }, 3000);
              var url = window.location.href.split("&code")[0];
              window.history.pushState({}, 0, url);
              this.openApp.toApps(0, this.tieziData.activityId, "", "", "");
            }
          },
        });
      }
    },
    quMask() {
      this.is_mask = false;
      this.is_Block = false;
    },
    pinlunImgDa(img, index) {
      uni.previewImage({
        urls: img,
        current: index,
        loop: true,
      });
    },
    imgsDa(imgs, index) {
      //点击图片放大
      console.log(imgs, index);
      let arrImg = [];
      imgs.forEach((v) => {
        arrImg.push(v.fileUrl);
      });
      uni.previewImage({
        urls: arrImg,
        current: index,
        loop: true,
      });
    },
    handleLike(id, index, item) {
      let token = uni.getStorageSync("token");
      if (this.isShare == 1 && !token) {
        uni.showToast({
          title: "正在授权登录，请稍等",
          duration: 1000,
          icon: "none",
        });
        this.configWeiXin(); //掉授权
      } else {
        //帖子点赞
        let that = this;
        let token = uni.getStorageSync("token");
        if (!token) {
          uni.showToast({
            title: "请授权登录再操作！",
            duration: 2000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/index/index",
            });
          }, 2000);
        } else {
          request({
            url: "app/appUserThumbs/thumbs",
            method: "POST",
            header: {
              "Content-Type": "application/json",
              "api-client": "72e0fee8172411ea995200163e05ff66",
              "api-version": "1.3.3",
              "Source-Type": 7,
              token: token,
            },
            data: {
              thumbsId: id,
              type: 13,
              status: index,
            },
          }).then((res) => {
            if (res.data.code == 200) {
              that.tieziDetail(that.id);
              if (index == 0) {
                uni.showToast({
                  title: "点赞成功",
                  duration: 2000,
                  icon: "none",
                });
              } else if (index == 1) {
                uni.showToast({
                  title: "取消点赞成功",
                  duration: 2000,
                  icon: "none",
                });
              }
            } else {
              uni.showToast({
                title: res.data.msg,
                duration: 2000,
                icon: "none",
              });
            }
          });
        }
      }
    },
    handleDelete() {
      let token = uni.getStorageSync("token");
      if (this.isShare == 1 && !token) {
        uni.showToast({
          title: "正在授权登录，请稍等",
          duration: 1000,
          icon: "none",
        });
        this.configWeiXin(); //掉授权
      } else {
        //删除帖子
        uni.showModal({
          title: "提示",
          content: "是否确定删除该条帖子",
          confirmColor: "#000000",
          cancelColor: "#007aff",
          cancelText: "再想想",
          success: (e) => {
            if (e.confirm) {
              let token = uni.getStorageSync("token");
              if (!token) {
                uni.showToast({
                  title: "请授权登录再操作！",
                  duration: 2000,
                  icon: "none",
                });
                setTimeout(() => {
                  uni.navigateTo({
                    url: "/pages/index/index",
                  });
                }, 2000);
              } else {
                request({
                  url: "app/activity/orgDeleteAct?uid=",
                  method: "post",
                  header: {
                    "Content-Type": "application/json",
                    "api-client": "72e0fee8172411ea995200163e05ff66",
                    "api-version": "1.3.3",
                    "Source-Type": 7,
                    token: token,
                  },
                  data: {
                    relationId: this.tieziData.id,
                    type: 13,
                    orgId: this.tieziData.circleId,
                  },
                }).then((res) => {
                  if (res.data.code == 200) {
                    uni.showToast({
                      title: "删除成功",
                      duration: 1000,
                      icon: "none",
                    });
                    setTimeout(function () {
                      uni.navigateBack({
                        delta: 1,
                      });
                    }, 1500);
                  } else {
                    uni.showToast({
                      title: res.data.msg,
                      duration: 2000,
                      icon: "none",
                    });
                  }
                });
              }
            }
          },
        });
      }
    },
    // 删除评论
    pinlunShanchu(messageId, id) {
      let token = uni.getStorageSync("token");
      if (this.isShare == 1 && !token) {
        uni.showToast({
          title: "正在授权登录，请稍等",
          duration: 1000,
          icon: "none",
        });
        this.configWeiXin(); //掉授权
      } else {
        uni.showModal({
          title: "提示",
          content: "是否确定删除该条评论",
          confirmColor: "#000000",
          cancelColor: "#007aff",
          cancelText: "再想想",
          success: (e) => {
            if (e.confirm) {
              let token = uni.getStorageSync("token");
              const that = this;
              if (!token) {
                uni.showToast({
                  title: "请授权登录再操作！",
                  duration: 2000,
                  icon: "none",
                });
                setTimeout(() => {
                  uni.navigateTo({
                    url: "/pages/index/index",
                  });
                }, 2000);
              } else {
                request({
                  url:
                    "app/orgMessage/removeComment?uid=63755c41127811e981b5fa163e4d6bc3",
                  method: "POST",
                  header: {
                    "content-type": "application/json;charset=UTF-8",
                    "api-client": "72e0fee8172411ea995200163e05ff66",
                    "api-version": "1.3.3",
                    "Source-Type": 7,
                    token: token,
                  },
                  data: {
                    messageId: messageId,
                    id: id,
                  },
                }).then((res) => {
                  if (res.data.code == 200) {
                    uni.showToast({
                      title: "评论删除成功",
                      duration: 2000,
                      icon: "none",
                    });
                    that.pinlunList();
                  } else {
                    uni.showToast({
                      title: res.data.msg,
                      duration: 2000,
                      icon: "none",
                    });
                  }
                });
              }
            }
          },
        });
      }
    },
    handleShare() {
      let token = uni.getStorageSync("token");
      if (this.isShare == 1 && !token) {
        // uni.showToast({
        //   title: "正在授权登录，请稍等",
        //   duration: 1000,
        //   icon: "none",
        // });
        // this.configWeiXin(); //掉授权
      } else {
        //分享功能
        let that = this;
        request({
          url: "wechat/portal/jsapiSignature/",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7, //post一定要带这个header，被这里坑了半天
          },
          data: {
            url: window.location.href.split("#")[0],
          },
        }).then((res) => {
          if (res.statusCode == 200) {
            jweixin.config({
              debug: false,
              appId: res.data.appId, // 必填，公众号的唯一标识
              timestamp: res.data.timestamp, // 必填，生成签名的时间戳
              nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
              signature: res.data.signature, // 必填，签名，见附录1
              jsApiList: [
                "updateAppMessageShareData",
                "updateTimelineShareData",
              ],
            });

            jweixin.ready(function () {
              // 判断封面
              if (that.tieziData.imgCollection.length == 0) {
                //空
                var imgP = "https://img.yiqilaiwang.com/icon-1024.png";
              } else if (that.tieziData.imgCollection.length != 0) {
                //视频或图片
                var arr_v = that.tieziData.imgCollection.filter((v) => {
                  return v.fileType == 3;
                });
                if (arr_v.length != 0) {
                  //视频
                  var imgP = arr_v[0].firstUrl;
                } else {
                  //图片
                  var imgP = that.tieziData.imgCollection[0].fileUrl;
                }
              }
              //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
              var urlLink =
                "https://h5test.yiqilaiwang.com/circle_h5/pages/index/trickDetail?id=" +
                that.id +
                "&isShare=1";
              jweixin.updateAppMessageShareData({
                title: "向您推荐一篇帖子，请查收", //分享标题
                desc: that.tieziData.content, // 分享描述
                link: urlLink, //分享链接
                imgUrl: imgP, //分享图标
                success: function () {
                  // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                  // 用户取消分享后执行的回调函数
                },
              });
              //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
              jweixin.updateTimelineShareData({
                title: "向您推荐一篇帖子，请查收", //分享标题
                desc: that.tieziData.content, // 分享描述
                link: urlLink, //分享链接
                imgUrl: imgP, //分享图标
                success: function () {
                  // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                  // 用户取消分享后执行的回调函数
                },
              });
            });
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding-bottom: 100rpx;
}
.mask_ {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;

  image {
    width: 570rpx;
    height: 758rpx;
  }

  .text {
    color: #fff;
    width: 100%;
    text-align: center;
    margin-left: -150rpx;
    margin-top: -20rpx;
  }
}

.zheZhao {
  position: fixed;
  z-index: 99999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;

  .modal {
    position: relative;
    background-color: #fff;
    border-radius: 8rpx;
    width: 520rpx;
    height: 300rpx;
    box-sizing: border-box;
    padding-top: 30rpx;

    .header {
      width: 100%;
      text-align: center;
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: bold;
    }

    .text {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(49, 49, 49, 1);
      width: 100%;
      text-align: center;
      margin-top: 30rpx;
    }

    .btn_ {
      position: absolute;
      bottom: 0;
      height: 85rpx;
      border-top: 2rpx solid #eee;
      width: 100%;
      display: flex;

      view {
        box-sizing: border-box;
        width: 50%;
        height: 85rpx;
        line-height: 85rpx;
        text-align: center;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.4);

        .right {
          width: 100%;
          height: 100%;
        }
      }

      .left {
        border-right: 2rpx solid #eee;
      }
    }
  }
}
.win_ZheZhao {
  position: fixed;
  z-index: 999999999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;

  .modal {
    position: relative;
    background-color: #fff;
    border-radius: 8rpx;
    width: 520rpx;
    height: 300rpx;
    box-sizing: border-box;
    padding: 0 25rpx;
    padding-top: 30rpx;

    .header {
      width: 100%;
      text-align: center;
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: 500;
    }

    .text {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(49, 49, 49, 1);
      width: 100%;
      text-align: center;
      margin-top: 30rpx;
    }

    .btn_ {
      height: 85rpx;
      border-top: 2rpx solid #eee;
      width: 100%;
      display: flex;
      margin-top: 50rpx;
      .left {
        width: 100%;
        height: 85rpx;
        line-height: 85rpx;
        text-align: center;
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
      }
      .right {
        width: 100%;
        height: 85rpx;
        line-height: 85rpx;
        text-align: center;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #2168eb;
      }
    }
  }
}
.lhzheZhao {
  position: fixed;
  z-index: 9999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;

  .modal {
    position: relative;
    background-color: #fff;
    border-radius: 8rpx;
    width: 520rpx;
    height: 300rpx;
    box-sizing: border-box;
    padding: 0 40rpx;
    padding-top: 30rpx;

    .header {
      width: 100%;
      text-align: center;
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: bold;
    }

    .text {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(49, 49, 49, 1);
      width: 100%;
      margin-top: 30rpx;
    }

    .btn_ {
      // position: absolute;
      // bottom: 0;
      height: 85rpx;
      border-top: 2rpx solid #eee;
      width: 100%;
      display: flex;
      margin-top: 20rpx;
      .left {
        width: 100%;
        height: 85rpx;
        line-height: 85rpx;
        text-align: center;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #0476fc;
      }
    }
  }
}

.fixation {
  border-top: 2rpx solid #eee;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 750rpx;
  height: 100rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rpx 1rpx 0px 0px rgba(0, 0, 0, 0.2);
  padding: 12rpx 32rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  z-index: 666;

  .one {
    // width: 366rpx;
    flex: 1;
    height: 74rpx;
    background: rgba(245, 246, 247, 1);
    border-radius: 46rpx;
    display: flex;
    align-items: center;
    padding-left: 29rpx;
    box-sizing: border-box;

    image {
      width: 26rpx;
      height: 27rpx;
      margin-right: 8rpx;
    }

    text {
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }

  .two {
    margin-left: 32rpx;
    height: 74rpx;
    display: flex;
    align-items: center;

    image {
      width: 40rpx;
      height: 40rpx;
      vertical-align: top;
      margin-right: 8rpx;
    }

    text {
      font-size: 22rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      margin-top: -16rpx;
    }
  }

  .three {
    margin-left: 32rpx;
    width: 138rpx;
    height: 58rpx;
    background: linear-gradient(
      133deg,
      rgba(32, 227, 105, 1) 0%,
      rgba(17, 186, 152, 1) 100%
    );
    border-radius: 29rpx;
    border-radius: 29rpx;
    padding: 0 25rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;

    image {
      width: 31rpx;
      height: 31rpx;
    }

    text {
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
}

.roof {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  padding: 25rpx 35rpx;
  border-bottom: 2rpx solid #dddddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  width: 750rpx;
  box-sizing: border-box;

  .left {
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);

    image {
      width: 28rpx;
      height: 28rpx;
      margin-right: 12rpx;
      vertical-align: center;
    }

    text {
      display: inline-block;
      position: relative;
      top: -3rpx;
    }
  }

  .right {
    margin-top: -30rpx;
    height: 41rpx;
    width: 41rpx;
  }
}

.zhe {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.2);

  .child {
    position: absolute;
    top: 90rpx;
    right: 35rpx;
    width: 180rpx;
    // height: 320rpx;
    background-color: #fff;
    border-radius: 10rpx;
    padding: 0 20rpx;
    box-sizing: border-box;

    .one {
      // height: 25%;
      // line-height: 90rpx;
      padding: 15rpx 0;
      font-size: 28rpx;
      width: 100%;
      text-align: center;
      border-bottom: 2rpx solid #eee;
    }

    .one:last-child {
      border-bottom: none;
    }

    .jiao {
      height: 0;
      width: 0;
      border-bottom: 15rpx solid #fff;
      border-left: 7.5rpx solid transparent;
      border-right: 7.5rpx solid transparent;
      position: absolute;
      right: 16rpx;
      top: -15rpx;
    }
  }
}

.content .itemList {
  margin-top: 100rpx;
  padding: 22rpx 32rpx;
  position: relative;

  .all_commt {
    // margin-top: 20rpx;
    .title {
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      padding: 25rpx 0;
    }

    .item {
      display: flex;
      position: relative;
      margin-bottom: 20rpx;

      .shanchu {
        position: absolute;
        right: 0;
        top: 0;

        image {
          width: 20rpx;
          height: 26rpx;
        }
      }

      .left {
        flex-shrink: 0;
        width: 70rpx;
        height: 70rpx;
        margin-right: 28rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .right {
        .one {
          font-size: 28rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(80, 113, 173, 1);
          margin-bottom: 6rpx;
        }

        .two {
          font-size: 32rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 45rpx;
        }

        .imgs {
          display: flex;
          flex-wrap: wrap;
          margin-top: 8rpx;

          image {
            width: 155rpx;
            height: 155rpx;
            border-radius: 5rpx;
            margin-right: 10rpx;
          }
        }

        .time {
          display: flex;
          margin-top: 8rpx;

          .hour {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 33rpx;
            margin-right: 10rpx;

            text {
              display: inline-block;
              font-size: 25rpx;
              margin-left: 10rpx;
              position: relative;
              top: -9rpx;
            }
          }

          .huifu {
            margin-top: 3rpx;
            font-size: 20rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 30rpx;
            width: 54rpx;
            height: 30rpx;
            background-color: #eee;
            text-align: center;
            border-radius: 12rpx;
          }
        }

        .commit_list {
          margin-top: 12rpx;
          background: rgba(248, 248, 250, 1);
          width: 100%;
          padding: 0 17rpx;
          box-sizing: border-box;

          .item {
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333ff;
            line-height: 37rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;

            text {
              color: rgba(80, 113, 173, 1);
              margin-right: 8rpx;
            }
            .content {
              color: #333;
            }
          }
        }
      }
    }
  }

  .xian_cu {
    height: 12rpx;
    background-color: #eee;
    width: 750rpx;
    margin: 10rpx 0;
    margin-left: -32rpx;
  }

  .reward {
    width: 360rpx;
    height: 74rpx;
    background: #fb9c2c;
    border-radius: 37rpx;
    margin: 30rpx auto;
    text-align: center;
    line-height: 74rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }

  .rewardList {
    margin-top: -8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #9a9a9a;

    image {
      width: 20rpx;
      height: 25rpx;
      margin-left: 12rpx;
    }
  }

  .zanXian {
    margin-top: 20rpx;
    padding: 12rpx 0;
    display: flex;
    justify-content: space-between;

    .left {
      display: flex;

      image {
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
      }
    }

    .right {
      position: relative;
      image {
        width: 35rpx;
        height: 36rpx;
        margin-right: 30rpx;
      }

      text {
        font-size: 22rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 30rpx;
        margin-left: 6rpx;
        position: absolute;
        top: 0;
        right: 0;
      }
      .active {
        color: rgba(33, 104, 235, 1);
        position: absolute;
        top: -15rpx;
        right: 0;
      }
    }
  }

  .quan_jia {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      > image {
        width: 116rpx;
        height: 116rpx;
        border-radius: 50%;
        margin-right: 25rpx;
        flex-shrink: 0;
      }

      .center {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .one {
          font-size: 30rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }

        .two {
          font-size: 22rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
        }
      }
    }

    .right {
      width: 148rpx;
      height: 52rpx;
      background: linear-gradient(
        136deg,
        rgba(255, 197, 79, 1) 0%,
        rgba(255, 107, 79, 1) 100%
      );
      border-radius: 25rpx;
      font-size: 26rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 52rpx;
      text-align: center;
    }

    .right1 {
      width: 148rpx;
      height: 52rpx;
      background: rgba(255, 255, 255, 1);
      border-radius: 25rpx;
      border: 2rpx solid rgba(255, 113, 79, 1);
      box-sizing: border-box;
      line-height: 52rpx;
      text-align: center;
      font-size: 26rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 113, 79, 1);
    }
  }

  .top {
    display: flex;
    justify-content: space-between;

    > .right {
      margin-top: 3rpx;
      display: flex;

      .jinghua {
        width: 30rpx;
        height: 30rpx;
        border-radius: 8rpx;
        margin-left: 10rpx;
      }

      .zhiding {
        border-radius: 8rpx;
        width: 40rpx;
        height: 28rpx;
      }
    }

    > .left {
      display: flex;

      .one {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .two {
        display: flex;
        flex-direction: column;
        height: 80rpx;
        justify-content: space-between;

        .top1 {
          display: flex;
          font-size: 28rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);

          text {
            display: inline-block;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(136, 136, 136, 1);
            line-height: 33rpx;
            margin-right: 20rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }
          .name {
            color: #333333;
            font-size: 29rpx;
            font-weight: 500;
          }
        }

        .bottom1 {
          font-size: 22rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          margin-top: -10rpx;
          color: rgba(136, 136, 136, 1);
        }
      }
    }
  }

  // 省略号
  .text_ {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(70, 70, 70, 1);
    margin: 20rpx 0;
    position: relative;
    // height: 130rpx;
    line-height: 42rpx;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // display: -webkit-box;
    // -webkit-box-orient: vertical;
    // -webkit-line-clamp: 3;
  }

  // 图片
  .imgs {
    // height: 220rpx;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    // overflow: hidden;

    .moreimg {
      margin-top: 10rpx;
      image {
        // margin-top: 10rpx;
        width: 220rpx;
        height: 220rpx;
        border-radius: 8rpx;
        margin-right: 13rpx;
      }
      image:nth-child(3n) {
        margin-right: 0;
      }
    }

    .myVideo {
      width: 100%;
      height: 400rpx;
    }
  }

  // 评论列表
  .commit_list {
    margin-top: 12rpx;
    background: rgba(248, 248, 250, 1);
    width: 100%;
    padding: 0 17rpx;
    box-sizing: border-box;

    .item {
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333ff;
      line-height: 37rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;

      text {
        color: rgba(80, 113, 173, 1);
        margin-right: 8rpx;
      }
    }

    .footer {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(84, 116, 174, 1);
      line-height: 33rpx;

      text {
        display: inline-block;
        height: 16rpx;
        height: 10rpx;
        font-size: 30rpx;
      }
    }
  }
}

.active {
  display: flex;
  flex-wrap: wrap;
  margin-top: 13rpx;

  .card {
    width: 686rpx;
    height: 380rpx;
    position: relative;
    margin-bottom: 20rpx;
    .mengceng {
      width: 100%;
      height: 190rpx;
      position: absolute;
      bottom: 0;
      left: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
      box-shadow: 0px 2rpx 20rpx 0rpx rgba(255, 255, 255, 0.1);
      opacity: 0.75;
    }
    .datu {
      width: 686rpx;
      height: 380rpx;
      border-radius: 8rpx;
    }

    .text {
      width: 100%;
      height: 130rpx;
      position: absolute;
      bottom: 20rpx;
      left: 0;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 23rpx;
      box-sizing: border-box;

      .title {
        font-size: 34rpx;
        font-weight: bold;
      }

      .message {
        display: flex;
        align-items: center;
        margin-top: 25rpx;
        box-sizing: border-box;

        image {
          width: 26rpx;
          height: 26rpx;
          margin-right: 9rpx;
        }

        text {
          font-size: 24rpx;
        }

        .time {
          margin-right: 40rpx;
        }
      }
    }

    .join {
      width: 148rpx;
      height: 52rpx;
      line-height: 52rpx;
      text-align: center;
      position: absolute;
      top: 32rpx;
      right: 24rpx;
      font-family: PingFang-SC-Medium;
      font-size: 26rpx;
      color: #ffffff;
      background: linear-gradient(90deg, #399aff 0%, #1571eb 100%);
      border-radius: 26rpx;
    }
  }
}

.goods {
  display: flex;
  flex-wrap: wrap;
  margin-top: 13rpx;
  .card {
    width: 686rpx;
    height: 380rpx;
    position: relative;
    margin-bottom: 20rpx;

    .datu {
      width: 686rpx;
      height: 380rpx;
      border-radius: 8rpx;
    }
    .mengceng {
      width: 100%;
      height: 190rpx;
      position: absolute;
      bottom: 0;
      left: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
      box-shadow: 0px 2rpx 20rpx 0rpx rgba(255, 255, 255, 0.1);
      opacity: 0.75;
    }

    .text {
      width: 100%;
      height: 170rpx;
      position: absolute;
      bottom: 0;
      left: 0;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 23rpx;
      padding-bottom: 60rpx;

      box-sizing: border-box;

      .title {
        font-size: 34rpx;
        font-weight: bold;
      }

      .message {
        display: flex;
        align-items: center;
        margin-top: 15rpx;
        box-sizing: border-box;
        font-size: 24rpx;
        color: #fb8724;
        margin-bottom: 20rpx;
      }

      .price {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;

        .jiage {
          s {
            font-size: 30rpx;
            color: #999999;
            margin-right: 20rpx;
          }

          text {
            font-size: 34rpx;
            color: #ffd510;
          }
        }

        .buy {
          height: 50rpx;
          padding: 0 20rpx;
          background: linear-gradient(90deg, #fba02b 0%, #fa701d 100%);
          box-shadow: 0px 0px 17rpx 4rpx rgba(0, 0, 0, 0.06);
          border-radius: 25rpx;
          font-size: 24rpx;
          color: #ffffff;
          text-align: center;
          line-height: 50rpx;
        }
      }
    }
  }
}
</style>
